<!-- 正文开始 -->
<div class="layui-form toolbar">
    <div class="layui-form-item">
        <div class="layui-inline " >
            <div class="layui-form-label w-auto" style="padding: 0;">
                <input type="checkbox" lay-filter="system-auth-changeType" name="like[write]" title="展开 / 折叠" checked>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto" style="padding-left: 0;">搜索：</label>
            <div class="layui-input-inline mr0">
                <input id="system-auth-editSearch" class="layui-input" type="text" placeholder="输入关键字"/>
            </div>
        </div>
        <div class="layui-inline">
            <button id="system-auth-btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="system-auth-btnAdd" class="layui-btn icon-btn" lay-perm = 'sys-auth-add'><i class="layui-icon">&#xe654;</i>添加</button>
        </div>
    </div>
</div>
<table id="system-auth-table" class="layui-table" lay-filter="system-auth-table"></table>
<!-- 操作列 -->
<div type="text/html" style="display: none" id="system-auth-operate">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-perm = 'sys-auth-see' lay-event="see">详情</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-perm = 'sys-auth-edit' lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-perm = 'sys-auth-del' lay-event="del">删除</a>
</div>

<script>
    layui.use(['layer', 'form', 'table', 'treetable','admin',"config"], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var table = layui.table;
        var treetable = layui.treetable;
        var config = layui.config;

        form.render('checkbox');
        // 渲染表格
        renderTable();
        function renderTable(){
            treetable.render({
                treeColIndex: 0,
                skin: 'line', //行边框风格
                elem: '#system-auth-table',
                url: 'system/authority/list',
                where:{
                    sortProperties:'orderNum',//排序字段
                    direction:'asc'//排序方式 desc（降序）、asc（升序）
                },
                parseData:function(res){
                    if(res){
                        admin.putTempData('system-auth-tree-json', res);
                    }
                    return res;
                },cols: [[
                    // {type: 'radio'},
                    {field: 'name', minWidth: 200, title: '权限名称'},
                    {field: 'authority', title: '权限标识'},
                    {field: 'menuHref', title: '菜单路径'},
                    {field: 'menuUrl', title: '菜单地址'},
                    {field: 'menuIcon', title: '菜单图标'},
                    {field: 'orderNum', width: 80, align: 'center', title: '排序号'},
                    {
                        field: 'isMenu', width: 80, align: 'center', templet: function (d) {
                            if (d.isMenu == 0) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            }
                            if (d.parentId == -1) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {templet: '#system-auth-operate', align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        }

        // 添加按钮点击事件
        $('#system-auth-btnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(system-auth-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDelete(obj.data.id);
            }else if(layEvent ==='see'){
                showEditModel(data,'see');
            }
        });

        // 删除
        function doDelete(authorityId) {
            admin.delete('system/authority/delete/'+authorityId,{},function (data) {
                layer.msg("删除权限成功", {icon: 1});
                renderTable();
            });

        }

        // 显示表单弹窗
        function showEditModel(data,see) {
            admin.putTempData('system-auth-obj', data);
            admin.putTempData('system-auth-formOk', false);
            admin.openForm({
                see:see,
                title: data ? '修改权限' : '添加权限',
                submitId:"system-auth-submit",
                path: 'system/auth/authForm.html',
                end: function () {
                    admin.getTempData('system-auth-formOk') && table.reload("system-auth-table");  // 成功刷新表格
                }
            });
        }


        //折叠 展开
        form.on('checkbox(system-auth-changeType)', function(data){
            var a =data.elem.checked;
            if(a){
                treetable.expandAll('#system-auth-table');
            }else{
                treetable.foldAll('#system-auth-table');
            }
        });
        // 搜索按钮点击事件
        $('#system-auth-btnSearch').click(function () {
            var keyword = $('#system-auth-editSearch').val();
            var $tds = $('#system-auth-table').next('.treeTable').find('.layui-table-body tbody tr td');
            if (!keyword) {
                $tds.css('background-color', 'transparent');
                layer.msg("请输入关键字", {icon: 5});
                return;
            }
            var searchCount = 0;
            $tds.each(function () {
                $(this).css('background-color', 'transparent');
                if ($(this).text().indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        $('body,html').stop(true);
                        $('body,html').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            } else {
                treetable.expandAll('#system-auth-table');
            }
        });
    });


</script>
